<template>
	<div class="attribute-container">
		<div class="head">
			<div>
				<svg aria-hidden="true" class="svg-icon arrow" @click="handleExpand">
					<use v-if="!isExpand" href="#icon-right_arrow_normal"></use>
					<use v-else href="#icon-below_arrow_normal"></use> 
				</svg>
				<span>变换</span>
			</div>
			<span>
			</span>
		</div>
 		<div class="body" v-if="isExpand" style="padding: 0 16px;">
			<div class="label">
				<span>位置</span>
			</div>
			<div class="items">
				<el-input v-model="locations" type="textarea" @change="onchange" />
			</div>
		</div>	 
	</div>
</template>


<script lang="ts" setup>
	const isExpand=ref(false);
	const props = defineProps({
	  locations: {
		type: Array,
		default: () => []
	  }
	})
	
	const locations=ref<any>([]);
	
	watch(props,() => {
			locations.value=JSON.stringify(props.locations);
		},
	    { immediate: true, deep: true },
	)

	const handleExpand=()=>{
		isExpand.value=!isExpand.value
	}
	
	const emits = defineEmits(['onchange'])
	const onchange=()=>{
		emits('onchange',{
			type:'locations',
			data:JSON.parse(locations.value)
		})
	}
	defineExpose({
	});
</script>

<style scoped>
	:deep(.el-input-number__decrease) {
	    background: #333333;
	    font-size: 13px;
		border-bottom: 1px solid #191919 !important;
		border-left: 1px solid #191919 !important;
		width: 16px;
	}
	:deep(.el-input-number__increase) {
	    background: #333333;
	    font-size: 13px;
		border-bottom: 1px solid #191919 !important;
		border-left: 1px solid #191919 !important;
		width: 16px;
	}
	
	:deep(.el-input-number.is-controls-right .el-input__wrapper) {
		padding-left: 0px;
		padding-right: 6px;
	}
	
	
</style>